<template >
    <div>
        <header>
            <div>
                <span>
                    <p @click="chan()"><i class="logo"></i></p>
                    <!-- <a href="/maincon"></a> -->
                    <router-link to=""><i class="cart"></i></router-link>
                 </span>
            </div>
            <div class="treasure-search">
              <form action="">
                  <div class="search-left">
                      <input type="text" class="input-left" placeholder="搜索" aria-label="" data-aria-clear-label="" name="k" autocomplete="off" autocorrect="off" autocapitalize="off" dir="auto" value="" id="nav-search-keywords">
                  </div>
                  <div class="search-right">
                      <input type="submit" class="input-right" value="" aria-label="搜索">
                      <i class="nav-submit"></i>
                  </div>
              </form>
            </div> 
        </header>
        <div class="bgimg">
                <img src="../../assets/images/treasure/bg1.jpg" width="100%" height="150px">
                <router-link to="/"><img src="../../assets/images/treasure/bg2.png" width="100%" height="150px" alt=""></router-link>
        </div>

        <!-- 切换tab栏 -->
        <div class="changetab">
            <ul>
                <li v-for="(tab,index) in tabs" @click="toggle(index,tab.view)" :class="{active:active==index}">
                    {{tab.type}}
                </li>
            </ul>
            <!--:is实现多个组件实现同一个挂载点-->
            <component :is="currentView"></component>
        </div>

        <!-- 筛选 -->
        <div class="screen">
            <div class="screen-header">
                <i class="header-left">21个搜索结果，位于亚马逊海购-...</i>
                <i class="header-right"><router-link to="/">筛选（1）>></router-link></i>
                
            </div>
            <div class="screen-con">
                <ul>
                    <li v-for="(item,index) in trealist">
                        <div class="con-left"><img :src="item.url" alt=""> <i class="popular">{{item.popular}}</i></div>
                        <div class="con-right">
                            <p  class="right-one">{{item.title}}</p>
                            <p class="describe">{{item.describe}}</p>
                            <p class="right-two">{{item.price}}</p>
                            <p class="right-three"><i class="cgcolor"></i><i class="nor">&nbsp;Prime&nbsp;会员限时0门槛免运费</i></p>
                            <p class="abroad"><img :src="item.abroad" alt=""></p>
                            <p class="right-discount">{{item.discount}}</p>
                            <p class="right-evaluate"><i class="star"></i><i class="count" :style="'background-position:'+item.position"></i></p>
                           
                        </div>
                    </li>
                </ul>
            </div>
        </div>
          <!-- 尾部 -->
          <footer>
            <div class="trea-top" >
              <a href="#"><i class="trea-icon"></i><b class="trea-b">返回顶部</b></a>
              <!-- <router-link to="/maincon">11111</router-link> -->
            </div>
              <div class="nav-con">
                <nav>
                  <ul class="nav-list">
                    <li><router-link to="/maincon"><span> 首页<i class="right-logo">1</i></span></router-link></li>
                    <li><router-link to=""><span> 购物车<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 我的亚马逊<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 我的心愿单<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 查找其他人的心愿单<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 我的账户<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 您的浏览记录<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 我的\"订购与节省\"商品<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 一键下单设置<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 联系我们<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 需要帮助？<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 亚马逊完整网址<i class="right-logo"></i></span></router-link></li>
                  </ul>
                </nav>
              </div>  
              <div class="trealogin">
                <span class="login-one"><i>已经是客户了吗？</i><i></i><router-link to="">登录</router-link></span>
                <span class="login-foot"> © 1999-2020, Amazon.com, Inc. or its affiliates</span>
              </div>        
        </footer>      
    </div>
</template>   
<style>
*{
    margin: 0px;
    padding: 0px;
    list-style: none;
    box-sizing: border-box;
}

/* ----------------------header----------------------------------------- */
header{
    /* width: 100%; */
    min-height: 100px;
    background:#f7f7f7;
    position: relative;
}
.logo{
    width: 100px;
    height: 55px;
    background:url("../../assets/images/basic-logo.png")no-repeat -20px -400px;
    position:absolute;
    top: -5px;
    left: 0px;
    transform:scale( 0.5);
}

.cart{
    width: 65px;
    height: 45px;
    background:url("../../assets/images/basic-logo.png")no-repeat -259px -679px;
    position:absolute;
    top: 0px;
    right: 5px;
    transform:scale( 0.5);
}
/* --------------搜索框--------------------------------------- */
.input-left{
    width:80%;
    position: absolute;
    min-height: 40px;
    top: 47px;
    left: 15px;
    background: white; 
}
.input-right{
    width: 40px;
    height: 40px;
    background:#5b626a;
    position: absolute;
    right: 20px;
    top: 47px;
    
}
.nav-submit{
    position: absolute;
    right: 20px;
    top: 47px;
    width: 40px;
    height: 40px;
    transform:scale( 0.45);
    background:url("../../assets/images/basic-logo.png")no-repeat -80px -580px;
}

/* -----------------------切换栏---------------------- */

.changetab ul li{
  width:80px;
  height:40px;
  cursor:pointer;
  display: inline-block;
  text-align: center;
  line-height: 40px;
}
.changetab ul li.active{
 border-bottom: 1px solid black;

}
/*----------------------------- 筛选 ---------------------------------------*/
.screen{
    background: white;
    
}
i{
  font-style: normal;
}
.screen .screen-header{
    height: 40px;
    background:#f7f7f7 ;
    margin-top: 20px;
    overflow: hidden;
}
.screen-header .header-left{
    font-size: 13px;
    line-height: 40px;
    padding-left:20px;
    float: left;
}
.screen-header .header-right{
    font-size: 13px;
    line-height: 40px;
    float:right;
    font-weight: bold;
}
.screen-header .header-right a{
  color: #0066c0 ;
}
.screen-con p{
    margin:0px 0px;
    line-height: 20px;
}
.screen-con ul li{
    width: 100%;
    height: 220px;
    overflow: hidden;
}
.con-left{
    float: left; 
    /* background: pink; */
    height: 184px;
    width: 30%;
    position: relative;
}
.con-left .popular{
    position: absolute;
    background: #E67A00;
    color: white;
    /* height: 24px; */
    top: 15px;
    left: 0px;
    font-size: 12px;
    line-height: 24px;
    width: 74px;
    text-align: left;
}
.con-right{
    float:right;
    height: 184px;
    width:70%;
    text-align: left;
}
.con-left img{
    height: 170px;
    line-height: 184px;
    margin-top: 40px;;
}
.con-right .right-one{
    margin-top: 15px;;
    font-weight: bold;
    font-size: 16px;
    width: 250px;
}
.right-one .describe{
    color: #f7f7f7 ;
}
.right-two{
    color: #B12704;
    font-weight: bold;
}
.right-three{
    height: 22px;
    widows: 100px;
    position: relative;
}
.right-three i{
    display: inline;
    margin-right: 5px;
}
.right-three .cgcolor{
    background: url('../../../data/images/treasure/bg1.png') -167px -2px;
    width: 110px;
    height: 42px;
    position: absolute;
    top: -8px;
    left: -35px;
    transform: scale(0.4);
}
.right-three .nor{
    position: absolute;
    top: 0px;
    left: 40px;
    font-style: normal;
}
.abroad img{
    width: 95px;
}
.con-right .abroad{
    display: block;
    margin-bottom:10px;
}
.right-evaluate{
  width: 200px;
  height: 20px;
  position: relative;
}
.count{
      position: absolute;
      background:url('../../assets/images/bg.png');
      width: 185px;
      height: 35px;
      left: -45px;
      bottom: -5px;
      transform: scale(0.5);
}
/* -------------------------底部导航栏------------------------------ */

footer{
  border-top:3px solid #cccccc;
  background: #f7f7f7 ;
}
.trea-top{
  padding-top:10px;
  border:1px solid #e7e7e7;
  padding-bottom: 10px;
  position: relative;
}
.trea-icon{
  background: url("../../../data/images/treasure/bg.png") -708px -10px;
  position: absolute;
  top: 5px;
  left: 0px;
  width: 15px;
  height:15px;
  transform: scale(0.5);
}
.trea-b{
  color:#0066c0 ;
  font-size:12px;
  padding-top:10px;
  margin-left: 20px;
  text-decoration: none
}
.nav-list{
    width: 96%;
    min-width: 200px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1em;
    margin:0px auto;

}

.nav-toplogo{
  position:absolute;

}
.nav-con{
  padding-top: 10px;

}
.nav-list li{
    display: block;
    padding: 14px 27px 14px 17px;
    outline: 0;
    border:0.5px solid #e7e7e7;
    background-color:white;
    position: relative;
}
.right-logo{
    width: 10px;
    height: 15px;
    position: absolute;
    top:10px;
    right: 15px;
    background:url("../../assets/images/basic-logo.png")no-repeat -220px -680px;
    opacity: .30;
    display: block;
}
.nav-list span{
    color: #111;    
    font-size: 15px;
    line-height: 16px;
    background-color:white;
    display: block;
}
.trealogin{
  height: 100px;
  text-align: center;
}
.trealogin .login-one{
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 15px;
}
.login-one a{
  color:#0066c0 ;
}
.trealogin .login-foot{
  
  font-size:12px;

}
</style>
<script>

import tab1 from '../tabs/tab1.vue'
import tab2 from '../tabs/tab2.vue'
import tab3 from '../tabs/tab3.vue'
import tab4 from '../tabs/tab4.vue'
export default {
//   name: 'app',
  data(){
    return {
      active:0,
      currentView:'tab1',
      tabs:[
        {
          type:'镇店之宝',
          view:'tab1',
         
        },
        {
          type:'Z划算',
          view:'tab2'
        },
          {
          type:'下单立减',
          view:'tab3'
        },
          {
          type:'Z秒杀',
          view:'tab4'
        }
        
      ],
      trealist:[]
    }
  },
  methods:{
    toggle(i,v){
      this.active=i;
      this.currentView=v;
    },
    chan(){
      this.$router.push('/maincon')
    }  
  },
  components:{
    tab1,
    tab2,
    tab3,
    tab4
  },
mounted(){
    var _this=this;
    this.$http.get('./data/treasure.json') 
        .then((response)=> {
        console.log(response);
        this.trealist=response.data.trealist;
         console.log(this.trealist);
    })
    .catch(function (error) {
        console.log(error);
    })
    .then(function () {
        // always executed
    }) 
    }           
}
</script>

